<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-center mui-title">{{item.name||'New'}}</h1>
      <a class="mui-icon mui-icon-checkmarkempty mui-pull-right" v-on="tap:saveItem()"></a>
    </header>
    <div class="mui-content">
      <div class="mui-table-view mui-grid-view">
        <div class="mui-table-view-cell mui-media mui-col-xs-4">
          <img style="height: 120px; width: 80px;" v-attr="src:item.img||'../../images/yf.jpg'" />
        </div>
        <div class="mui-table-view-cell mui-media mui-col-xs-8 mui-input-group">
          <div class="mui-input-row">
            <label>名称</label>
            <input v-model='item.name' class="mui-input-clear mui-input">
          </div>
          <div class="mui-input-row">
            <label>售价</label>
            <input v-model='item.price' type="number" class="mui-input-clear mui-input">
          </div>
          <div class="mui-input-row">
            <label>库存</label>
            <input v-model='item.qty' type="number" class="mui-input-clear mui-input">
          </div>
        </div>
      </div>
      <h5 class="mui-content-padded">规格属性</h5>
      <div class="mui-card">
      </div>
      <h5 class="mui-content-padded">其它信息</h5>
      <div class="mui-card">
      </div>
    </div>
    <script src="../../js/mui.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../app/vue-html5.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue) {
        window.vm = vm = new Vue.PageVm({
          el: 'body',
          name: 'page Product-form',
          model: 'Products',
          muiInitOption: {
            beforeback: function() {
              Vue.$emit(vm.$parentWebviewId, 'refreshList');
            }
          },
          created: function() {
            this.loadItem();
          },
          events: {
            show: function(data) {
              this.item = this.$defaultItem();
              this.loadItem(null, data);
            }
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.form]
        });
      })(mui, window, document, Vue);
    </script>
  </body>

</html>